<div class="add-form-container">
  <div class="ui icon message" *ngIf="newContact">
    <i class="notched check green icon"></i>
    <i class="close icon" (click)="newContact = null"></i>
    <div class="content">
      <div class="header">
        New Contact Added!
      </div>
      <p>Name : {{ newContact.name }}</p>
    </div>
  </div>
  <form  class="ui big form" #contactForm="ngForm" (submit)="onSubmit(contactForm)" [class.loading]="loading">
    <div class="fields">
      <div class="eight wide field">
        <label for="firstName">First Name</label>
        <input type="text" placeholder="First Name" name="firstName" ngModel>
      </div>
      <div class="eight wide field">
          <label for="lastName">Last Name</label>
          <input type="text" placeholder="Last Name" name="lastName" ngModel>
        </div>
    </div>
    <div class="field">
      <label for="address">Address</label>
      <input type="text" placeholder="Address" name="address" ngModel>
    </div>
    <div class="equal width fields">
      <div class="field">
          <label for="areaCode">Phone</label>
          <input type="text" maxlength="5" placeholder="(###)" name="areaCode" ngModel>            
      </div>
      <div class="field">
          <label for="prefix"> &nbsp; </label>
          <input type="text" maxlength="3" placeholder="(###)" name="prefix" ngModel>            
      </div>
      <div class="field">
          <label for="lineNumber"> &nbsp; </label>
          <input type="text" maxlength="4" placeholder="(###)" name="lineNumber" ngModel>            
      </div>      
    </div>
    <div class="field">
        <label for="photo">Photo Url</label>
        <input type="text"  placeholder="http://cdn.com/profile.jpg" name="photoUrl" ngModel>            
    </div>
    <button type="submit" class="ui submit large grey button right floated">Submit </button>
  </form>
</div>